import React, { Component } from "react";

class Solution extends Component {
    state = {
        solutions: [
            { number: 1164, title: "加工零件1", views: 2937 },
            { number: 1162, title: "加工零件2", views: 2937 },
            { number: 1124, title: "加工零件3", views: 2937 },
            { number: 6114, title: "加工零件4", views: 2937 },
            { number: 1524, title: "加工零件5", views: 2937 },
            { number: 1568, title: "加工零件6", views: 2937 },
            { number: 1244, title: "加工零件7", views: 2937 },
        ],
    };

    ClickHandle = (solution) => {
        let solutions = this.state.solutions.filter(e => e !== solution);
        this.setState({
            solutions
        })
    }
    render() {
        if (this.state.solutions.length === 0) {
            return (
                <h1>
                    No Solutions!
                </h1>
            )
        }
        return (<React.Fragment>
            <table className="table table-striped">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">number</th>
                        <th scope="col">title</th>
                        <th scope="col">views</th>
                        <th scope="col">handler</th>
                    </tr>
                </thead>
                <tbody>
                        {this.state.solutions.map(solution => (
                        <tr key={Solution.key}>
                            <th scope="row">{Solution.key++}</th>
                            <td>{solution.number}</td>
                            <td>{solution.title}</td>
                            <td>{solution.views}</td>
                            <td><button type="button" className="btn btn-danger" height="30px" onClick={() => this.ClickHandle(solution)}>删除</button></td>
                        </tr>
                        ))}
                </tbody>
            </table>
        </React.Fragment>);
    }
}

Solution.key = 1;

export default Solution;
